<template>
  <div>
    <!-- <Child></Child>
    <Child2></Child2> -->
    <!-- <Child>
      <template>
        <button>哈哈</button>
      </template>
      <template slot="aa">
        <button>嘿嘿</button>
      </template>
    </Child>

    <Child>
      <template>
        <p>哈哈</p>
      </template>
      <template slot="aa">
        <p>嘿嘿</p>
      </template>
    </Child> -->

    <!--
      1、数据是在父组件的
      2、数据是由父组件传递给子组件去使用的，就是让子组件进行展示的（vfor）
      3、子组件在展示过程当中，数据的结构不是子组件说了算，而是父组件说了算
     -->

    <!-- <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2> -->
    <!-- 作用域插槽：
    1、父组件传递数据给子组件
    2、子组件展示数据，展示的同时留插槽，回传当前展示的数据
    3、父组件接收回传的数据，判断数据添加结构再次传递给子组件当中的插槽 -->
    <List :todos="todos">
      <template slot-scope="slotProps">
        <!-- slotProps是一个对象
        {
          todo:todo
        } -->
        <span :style="{color:slotProps.todo.isComplete?'green':''}">{{slotProps.todo.text}}</span>

      </template>
    </List>
    <hr>

    <!-- <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>  -->
    <List :todos="todos">

      <template slot-scope="{todo,index}">
        <p :style="{color:index%2===1?'hotpink':'skyblue'}">{{index+1}}---{{todo.text}}</p>
      </template>
      <template slot-scope="{todo,index}">
        <p :style="{color:index%2===1?'hotpink':'skyblue'}">{{index+1}}---{{todo.text}}</p>
      </template>
    </List>

  </div>
</template>

<script type="text/ecmascript-6">
  import Child from '@/pages/Communication/ScopeSlotTest/Child.vue'
  import Child2 from '@/pages/Communication/ScopeSlotTest/Child2.vue'

  import List from './List'
  export default {
    name: 'ScopeSlotTest',
    data () {
      return {
        todos: [
          {id: 1, text: 'AAA', isComplete: false},
          {id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},
          {id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },

    components: {
      List,
      Child,
      Child2
    }
  }
</script>
